<template>
    <div id="main">
        <Header/>

        <div id="center">
            <div id="center-top">
                <div id="class_name">
                    <p>{{classname}}</p>
                </div>
                <div id="class_btn">
                     <el-button size="small" type="primary" @click="btn1" v-show="this.tabPosition === '任务管理'">新增</el-button>
                     <el-button size="small" type="primary" @click="routerlinknewstask()" v-show="this.tabPosition === '问卷库管理'" style="margin:0">新增</el-button>

                        <el-dialog title="新增任务" :visible.sync="dialogFormVisible" top="18vh">
                            <el-form :model="form" :rules="rules" style="font-size:12px" ref="form" label-width="100px" class="demo-ruleForm">
                                <el-form-item label="任务名称" :label-width="formLabelWidth" prop="name"><br>
                                <el-input
                                    type="text"
                                    placeholder="请输入内容"
                                    v-model="form.task_name"
                                    maxlength="50"
                                    width ="100% !important"
                                    style="margin-left:-70px"
                                    show-word-limit
                                    ></el-input>
                                </el-form-item>

                                <el-form-item label="开始时间" :label-width="formLabelWidth" prop="starttime"><br>
                                  <el-date-picker
                                    v-model="form.start_time"
                                    type="datetime"
                                    style="width: 100%;margin-left:-70px"
                                    placeholder="选择日期"
                                    value-format="yyyy-MM-dd HH:mm:SS"
                                  />
                                </el-form-item>

                                <el-form-item label="结束时间" :label-width="formLabelWidth" prop="endtime"><br>
                                  <el-date-picker
                                    v-model="form.end_time"
                                    type="datetime"
                                    style="width: 100%;margin-left:-70px"
                                    placeholder="选择日期"
                                    value-format="yyyy-MM-dd HH:mm:SS"
                                  />
                                </el-form-item>

                                <el-form-item label="调研对象" :label-width="formLabelWidth" prop="type"><br>
                                  <el-select v-model="form.research_obj" clearable  placeholder="请选择调研对象" style="width:100%;margin-left:-70px">
                                      <el-option
                                        v-for="item in options1"
                                        :key="item.label"
                                        :label="item.label"
                                        :value="item.label">
                                      </el-option>
                                  </el-select>
                                </el-form-item>

                                <el-form-item label="调研问卷" :label-width="formLabelWidth" prop="type"><br>
                                <el-select v-model="form.questionnaire" clearable  placeholder="请选择调研问卷" style="width:100%;margin-left:-70px">
                                    <el-option
                                      v-for="item in options3"
                                      :key="item.quest_invest_id"
                                      :label="item.quest_name"
                                      :value="item.quest_invest_id">
                                    </el-option>
                                </el-select>
                                </el-form-item>
                            </el-form>

                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="btn2">确 定</el-button>
                            </div>
                        </el-dialog>

                </div>
            </div>

            <div style="width: 100%;height: 0.83rem;" class="center-top">
                <div id="center-tab">
                 <el-radio-group v-model="tabPosition" type="card">
                    <el-radio-button label="任务管理" size="small">任务管理</el-radio-button>
                    <el-radio-button label="问卷库管理" size="small">问卷库管理</el-radio-button>
                </el-radio-group>
                </div>
                <div id="center-search" v-show="this.tabPosition === '任务管理'">
                    <el-select
                      v-model="value1"
                      clearable
                      placeholder="全部"
                      style="margin-right: 0.16rem;"
                      >
                        <el-option
                        v-for="item in options1"
                        @click.native="btn3(item.label)"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>

                    <el-select
                      v-model="value2"
                      clearable
                      placeholder="全部"
                      style="margin-right: 0.16rem;">
                        <el-option
                        v-for="item in options2"
                        @click.native="btn4(item.value)"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>


                </div>
                    <div class="search-btn">
                    <el-input class="search-input"
                        placeholder="请输入内容"
                        v-model="input"
                        clearable>
                    </el-input>
                        <el-button
                          size="small"
                          type="primary"
                          @click="btn5"
                          style="margin-left: 1.85rem;position: relative;top: -1px;left: -1px;">
                          查询
                        </el-button>
                    </div>
            </div>

            <TaskManagement :text="text" :lists1="lists1" ref="child" :str=this.tabPosition></TaskManagement>
            <QuestionnaireDatabaseManagement :text="text" :str=this.tabPosition></QuestionnaireDatabaseManagement>

        </div>
    </div>
</template>
<script>
import Header from "../../components/Header"
import TaskManagement from "./TaskMsnagement/TaskManagement.vue"
import QuestionnaireDatabaseManagement from "./QuestionnaireDatabaseManagement/QuestionnaireDatabaseManagement.vue"
import request from "../../utils/request";
export default {
    components:{
        Header,
        TaskManagement,
        QuestionnaireDatabaseManagement
    },
    created() {
        this.select();
    },
    data() {
        return {
            username : "姓名",

            classname : '问卷调研',
            tabPosition: '任务管理',

            dialogFormVisible: false,
            text:'',
            lists1:{
                research_obj: '',
                state:''
            },

            form: {
                task_name: '',
                start_time: '',
                end_time: '',
                research_obj: '',
                questionnaire : '',
            },
            formLabelWidth: '',
            options1: [
                {value: '选项1',
                    label: '学生',},
                {
                    value: '选项2',
                    label: '教职工',
                }],
            options2: [
                {value: '0',
                    label: '待发布',},
                {
                    value: '1',
                    label: '进行中',
                },{
                    value: '2',
                    label: '已结束',
                },
                {
                    value: '3',
                    label: '已取消',
                }],
            options3:{},
            value1: '',
            value2: '',
            input: '',
            rules: {
                task_name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                start_time: [
                    { type: 'datetime', required: true, message: '请选择日期', trigger: 'change' }
                ],
                end_time: [
                    { type: 'datetime', required: true, message: '请选择时间', trigger: 'change' }
                ],
                research_obj: [
                    { type: 'array', required: true, message: '请至少选择一个任务性质', trigger: 'change' }
                ],
                questionnaire: [
                    { type: 'array', required: true, message: '请至少选择一个任务性质', trigger: 'change' }
                ],
            }


        }
    },
    methods: {
        select(){
            request.post("/questinvest/selectQuestinvest").then(res => {
                this.options3 = res;
            })
        },
        routerlinknewstask(){
            this.$router.push({path:"/NewTAsk",query: { id: "新增" }})
        },
        btn1(){
            this.dialogFormVisible = true
            this.form = {}
        },
        btn2(){
            console.log(this.form)
            request.post("/task/insertTask",this.form).then(res => {
                var st = res
                if (st){ //更新
                    this.$message({
                        type: "success",
                        message: "新增成功"
                    })
                }else { //插入
                    this.$message({
                        type:"error",
                        message: "新增失败"
                    })
                }
                location.reload()
            })
            this.dialogFormVisible = false
        },
        btn3(val){
            this.lists1.research_obj = val
        },
        btn4(val){
            this.lists1.state = val
        },
        btn5(){
            this.text = this.input
        },
    }

}
</script>
<style>
#main {
    width: 19rem;
    height: 9.69rem;
    background: #EBEFF0;
}
#el-input{
    margin-left:-70px;
}
#center{
    width: 12rem;
    height: 7.8rem;
    margin: 0 auto;
    background: #FFFFFF;
    margin-top: 0.4rem;
}

#center-top{
    height: 0.7rem;
    width: 12rem;
    border-bottom: #EBEBEB solid 0.01rem;
}

#class_name{
    width: 0.72rem;
    height: 0.18rem;
    font-size: 0.18rem;
    font-family: Microsoft YaHei UI;
    font-weight: bold;
    color: #333333;
    line-height: 0.18rem;
    margin: 0.23rem 0 0 0.25rem;
    float: left;
}
#class_name p{
    margin: 0;
}
#class_btn{
    float: left;
    line-height: 0;
    margin-left: 10.08rem;
    
}
#center-tab{
    list-style: none;
    font-size: initial;
    margin: 0.24rem 0 0 0.24rem;
    width: 2.4rem;
    float: left;
}
.el-radio-button__inner{
    padding: 0.09rem 0.14rem !important;
}
.center-top .el-input__inner{
    width: 1.9rem;
    height: 0.4rem;
}
.el-input__icon {
    line-height: 0.26rem;
}
#center-search{
    float: left;
    margin: 0.22rem 0 0 2rem;
    font-size: 0px;
}
.search-input{
    margin-top: 15px;
    width: 0.16rem !important;
}
.search-btn{
    line-height: 0;
    float: right;
    margin: 0.07rem 0.22rem 0 0rem;
    }
.search-btn .el-input__suffix{
    left: 120px;
    top: 2px;
}
#center-info{
    width: 11.51rem;
    height: 6.38rem;
    /* border: 1px solid #EBEBEB; */
    border-radius: 4px;
    margin: 0 auto;
}
.el-table .el-table__cell {
    padding: 7px 0;
    }
.paging{
    width: 5.1rem;
    margin: 0 auto;
    margin-top: 25px;
    height: 0.6rem;
    font-size: 2px;
}
.el-dialog{
    width: 25%;
}
</style>
